<template>
  <div class="weekView app-container">
    <div class="flex mb-15px">
      <div class="flex mr-15px items-center">
        <span class="cirType mr-10px"></span>已完成
      </div>
      <div class="flex items-center">
        <span class="cirType mr-10px" style="background-color: #f6a70091"></span
        >未完成
      </div>
    </div>
    <el-row v-loading="loading">
      <template v-for="(item, index) in date" :key="item">
        <el-col :span="3" :offset="index ? 0 : 1" class="dateHeader">
          {{ item }}
        </el-col>
      </template>
    </el-row>
    <el-row v-for="item in weekData" :key="item">
      <template v-for="(vm, im) in item" :key="vm">
        <el-col
          :span="3"
          :offset="im ? 0 : (vm.week - 1) * 3 + 1"
          class="dateContent"
        >
          <div class="tastDate">{{ vm.date }}</div>
          <div class="flex flex-col items-center w-full">
            <span class="taskType">{{ vm.done }}</span>
            <span class="taskType" style="background-color: #f6a70091">{{
              vm.doing + vm.undone
            }}</span>
            <!-- <span class="taskType">已取消：{{ vm.cancel }}</span> -->
          </div>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script setup>
import { getWeekViewData } from '@/api/taskManage/task'

const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  }
})

const date = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
const weekData = ref()
defineExpose({ initView })
const loading = ref(false)
function initView() {
  loading.value = true
  getWeekViewData(props.params).then(res => {
    const data = { ...res.data }
    const dateParams = Object.keys(data).map(v => {
      const val = data[v]
      val.week = new Date(v).getDay()
      val.date = v.replace(/\d{4}-\d{2}-/, '')
      if (!val.week) {
        val.week = 7
      }
      return val
    })

    handleData(dateParams)
    loading.value = false
  })
}

function handleData(dateParams) {
  // weekData.value
  const result = []
  const firstDay = dateParams[0].week
  let index = result.length,
    difference = 7 - firstDay

  let currentIndex = 0
  dateParams.forEach(v => {
    if (!result[index]?.length) {
      result[index] = []
    }
    result[index].push(v)
    currentIndex++
    if (currentIndex > difference) {
      index = result.length
      difference = 7
      currentIndex = 1
    }
  })
  weekData.value = result
}
</script>

<style scoped lang="scss">
.dateHeader {
  @apply p-7px text-center;
  border: 1px solid #aaa;
  font-size: 20px;
  font-weight: 600;
  background-color: rgb(220, 220, 220);
  border-radius: 5px;
  // margin: 1px;
}
.dateContent {
  @apply h-100px p-5px text-center relative flex justify-center items-center;
  border: 1px solid #ddd9d9;
  border-radius: 5px;
  // background-color: antiquewhite;
  // margin: 1px;
}

.tastDate {
  // line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  // background-color: antiquewhite;
  // background-color: ;
}

.cirType {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background-color: #8ee289;
}

.taskType {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 20px;
  font-size: 14px;
  border-radius: 5px;
  background-color: #8ee289;
  margin-top: 10px;
}
</style>
